<template>
  <view class="swiperBox">
    <swiper
      class="swiper"
      circular
      :indicator-dots="indicatorDots"
      :autoplay="autoplay"
      :interval="interval"
      :duration="duration"
    >
      <swiper-item v-for="item in list" :key="item.goods_id">
        <img :src="item.image_src" />
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
import { getSwiperDataAPI } from "@/api/index";
export default {
  data() {
    return {
      list: [],
      indicatorDots: true,
      autoplay: true,
      interval: 2000,
      duration: 500,
    };
  },
  created() {
    this.getSwiperData();
  },
  methods: {
    async getSwiperData() {
      const { message } = await getSwiperDataAPI();
      this.list = message;
    },
  },
};
</script>

<style lang="scss">
.swiperBox {
  width: 100vw;
  .swiper {
    height: 340rpx;
    img {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
